<template>
  <div class="foucslist">
    <div class="userinfo">
      <img :src=foucsUserXqing.profile.backgroundUrl alt="">
        <div class="top">
          <div class="infourl">
            <img src="../img/foulist/back.png" alt="">
            <img src="../img/foulist/more.png" alt="">
            <img src="../img/foulist/yp.png" alt="">
          </div>
          <div class="infoimg">
          <span class="s1">
            <img :src=foucsUserXqing.profile.avatarUrl alt="">
          </span>
            <span class="clir">
            <img src="../img/foulist/v.png" alt="">
          </span>
            <span class="s2 ss">
            <img src="../img/foulist/touxiang.png" alt="">
          </span>
            <span class="s3 ss">
            <img src="../img/foulist/youjian.png" alt="">
          </span>
            <span class="s4 ss">
            <span>
               歌手页
          <img src="../img/foulist/back.png" alt="">
            </span>

          </span>
          </div>
          <div class="infonews">
            <p class="p1">{{foucsUserXqing.profile.nickname}}</p>
            <p class="p2">{{foucsUserXqing.profile.detailDescription}}</p>
            <p class="p3">
              <span class="s1">关注 0</span>
              <span class="s2">粉丝 796.7万</span>
            </p>
            <ul>
              <li class="l1" v-if="foucsUserXqing.profile.gender === 1">
                <img src="../img/foulist/nan.png" alt="">
              </li>
              <li class="l1" v-if="foucsUserXqing.profile.gender !== 1">
                <img src="../img/foulist/nv.png" alt="">
              </li>
              <li>
                Lv.{{foucsUserXqing.level}}
              </li>
              <li>
                {{foucsUserXqing.profile.city}}
              </li>
            </ul>
          </div>
        </div>
    </div>
    <div class="tabs">
      <van-tabs v-model="active" animated swipeable>
        <van-tab title="音乐" >
          <p class="p1">
            <span class="s1">歌单({{userLove.length}})</span>
            <span class="s2">共被收藏2677次</span>
          </p>
          <div class="gedan">
            <ul>
              <li v-for="(key,item) in userLove" :key="item">
                 <span class="s1">
                    <img :src=userLove[item].coverImgUrl alt="">
                </span>
                <span class="s2">

              <p class="rank">{{userLove[item].name}}</p>
              <p class="num" v-if="userLove[item].playCount < 100000000">
                {{userLove[item].trackCount}}首，播放{{(userLove[item].playCount/10000).toFixed(1)}}万次
              </p>
                  <p class="num" v-else="userLove[item].playCount.length >= 100000000">
                {{userLove[item].trackCount}}首，播放{{(userLove[item].playCount/100000000).toFixed(1)}}亿次
              </p>
            </span>
              </li>

            </ul>

          </div>
          <p class="p1">
            <span class="s1">收藏的歌单(1)</span>

          </p>
          <div class="gedan">
            <ul>
              <li v-for="(key,item) in userLove" :key="item">
                 <span class="s1">
                    <img :src=userLove[item].coverImgUrl alt="">
                </span>
                <span class="s2">

              <p class="rank">{{userLove[item].name}}</p>
              <p class="num" v-if="userLove[item].playCount < 100000000">
                {{userLove[item].trackCount}}首，播放{{(userLove[item].playCount/10000).toFixed(1)}}万次
              </p>
                  <p class="num" v-else="userLove[item].playCount.length >= 100000000">
                {{userLove[item].trackCount}}首，播放{{(userLove[item].playCount/100000000).toFixed(1)}}亿次
              </p>
            </span>
              </li>
            </ul>

          </div>
        </van-tab >
        <van-tab title="动态">
          <div class="event" v-for="(key,item) in foucsDongtai" :key="item">

            <span class="sleft">
              <span class="simg" >
                <img :src=foucsUserXqing.profile.avatarUrl alt="">
              <span class="cil">
                  <img src="../img/foulist/v.png" alt="">
                </span>
            </span>

            </span>

            <span class="stext">
              <p class="pname" v-if="foucsDongtai[item].song">
                <span class="s1">{{foucsDongtai[item].song.artists[0].name}}</span>
                <span class="s2">分享单曲:</span>
              </p>
               <p class="pname" v-if="foucsDongtai[item].mv">
                <span class="s1">{{foucsDongtai[item].mv.artists[0].name}}</span>
                <span class="s2">分享Mv:</span>
              </p>
              <p class="date">7月17日</p>
              <p class="pte">
                {{foucsDongtai[item].msg}}
              </p>

              <div class="vi">
                <span class="svideo" v-if="foucsDongtai[item].song">
                  <audio src=""></audio>
                  <img :src=foucsDongtai[item].song.album.blurPicUrl alt="">
                </span>
                 <span class="svideo" v-if="foucsDongtai[item].mv">
                  <video :poster=foucsDongtai[item].mv.imgurl></video>
                </span>
              <span class="sname" v-if="foucsDongtai[item].song">
                  <span class="s1" >{{foucsDongtai[item].song.name}}</span>
                <br>
                  <span class="s2">{{foucsDongtai[item].song.artists[0].name}}</span>
                </span>
                <span class="sname" v-if="foucsDongtai[item].mv">
                  <span class="s1" >{{foucsDongtai[item].mv.name}}</span>
                <br>
                  <span class="s2">{{foucsDongtai[item].mv.artistName}}</span>
                </span>
            </div>
               <div class="pl">
            <span>
            <img src="../img/py/dz.png" alt="">
             14.1万
            </span>
            <span>
            <img src="../img/py/pl.png" alt="">
             8692
            </span>
            <span>
            <img src="../img/py/zf.png" alt="">
            3519
            </span>
            <span class="s4">
            <img src="../img/myyinyue/more.png" alt="">

            </span>
          </div>
            </span>

          </div>
        </van-tab>
        <van-tab title="关于TA">
          <div class="info">
            <p class="renzheng">认证消息</p>
            <p class="pgeshou">
                <span>
              <img src="../img/foulist/v.png" alt="">

            </span>
              {{foucsUserXqing.profile.detailDescription}}
            </p>
          </div>
          <div class="gereninfo">
            <p class="ptitle">个人信息</p>
            <p class="pinfo">
              <span>等级：</span>
              <span class="sleave">Lv.{{foucsUserXqing.level}}</span>
            </p>
            <p class="pinfo">
              <span>性别：</span>
              <span v-if="foucsUserXqing.profile.gender === 1">男</span>
              <span v-else="foucsUserXqing.profile.gender !== 1">女</span>
            </p>
            <p class="pinfo">
              <span>地区：</span>
              <span> {{foucsUserXqing.profile.city}}</span>
            </p>
            <p class="jianjie">个人简介</p>
            <p class="text" v-if="foucsUserXqing.profile.signature !== ''">
              {{foucsUserXqing.profile.signature}}
            </p>
            <p class="text" v-if="foucsUserXqing.profile.signature === ''">
              还没有填写个人介绍
            </p>
          </div>
        </van-tab>

      </van-tabs>

    </div>
  </div>

</template>

<script>
  import {mapState} from 'vuex'
    export default {
        name: "foucslist",
        computed:{
          ...mapState(['foucsUserXqing','userLove','foucsDongtai'])
        },
        data(){
          return{
            index:'',
            active:0,
          }
        },
        created(){
          this.index=this.$route.query.items;
          this.$api.getUserXqing({uid:this.index});
          this.$api.getUserMusicList({uid:this.index});
          this.$api.getUserDongtai({uid:this.index});
          console.log(this.index);

        }
    }
</script>

<style lang="scss">
*{
  margin: 0px;
  padding: 0px;
}
  .foucslist{
    width: 1245px;
    .userinfo{
      height: 1160px;
      background-color: aqua;
      position: relative;
      z-index: -1;
      img{
        height: 100%;
        width: 100%;
      }
      .top{
        width: 100%;
        top: 0;
        position: absolute;
        z-index: 9999;
        .infourl{
          font-size: 0;
          box-sizing: border-box;
          padding-left: 65px;
          padding-right: 50px;
          padding-top: 90px;
          img{
            vertical-align: middle;
            width: 80px;

          }
          img:nth-child(1){

          }
          img:nth-child(2){
            margin-left:820px;
          }
          img:nth-child(3){
            margin-left: 65px;
          }
        }
        .infoimg{
          margin-top: 90px;
          padding-right: 50px;
          box-sizing: border-box;
          position: relative;
          .clir{
            width: 60px;
            height: 60px;
            border-radius: 50%;
            background-color: bisque;
            position: absolute;
            bottom: 5px;
            left: 232px;
            img{
              width: 40px;
              height: 40px;
              margin-top: 10px;
              margin-left: 10px;
              display: block;
            }
          }
          span{
            display: inline-block;
            vertical-align: middle;
          }
          .s1{
            margin-left: 60px;
            width: 243px;
            height: 245px;

            border-radius: 50%;
            img{
              width: 243px;
              height: 245px;
              border-radius: 50%;
            }
          }
          .ss{
            background-color: #45454d;
            width: 100px;
            height: 100px;
            opacity: 0.5;
            border-radius: 10px;
            text-align: center;
            position: relative;
            margin-right: 10px;
            img{
              width: 55px;
              position: absolute;
              top: 50%;
              left: 50%;
              transform: translate(-50%,-50%);
            }
          }
          .s2{
            margin-left: 370px;
          }
          .s4{
            position: absolute;
            right: 50px;
            margin-right: unset;
            width: 235px;
            top: 50%;
            color: white;
            font-size: 38px;
            transform: translateY(-50%);
            span{
              margin-top: 26px;
              img{
                position: unset;
                top: unset;
                left: unset;
                transform: unset;
                width: 40px;
                vertical-align: middle;
              }
            }

          }
        }
        .infonews{
          box-sizing: border-box;
          padding-left: 65px;

          .p1{
            font-size: 58px;
            color: white;
            margin-top: 60px;
            font-weight: bold;
            margin-bottom: 35px;
          }
          .p2{
            font-size: 35px;
            color: white;
            margin-bottom: 35px;
          }
          .p3{
            .s1{
              display: inline-block;
              line-height: 40px;
              border-right: 2px solid #ccc;
              padding-right: 35px;
              font-size: 35px;
              color: #716e66;
              box-sizing: border-box;
            }
            .s2{
              display: inline-block;
              line-height: 40px;
              padding-left: 35px;
              font-size: 35px;
              color: #716e66;
              box-sizing: border-box;
            }
          }
          ul{
            margin-top: 20px;
            li{
              list-style: none;
              display: inline-block;
              margin-right: 15px;
              box-sizing: border-box;
              padding: 15px 35px;
              font-size: 35px;
              color: white;
              background-color: #cdbf96;
              border-radius: 45px;

            }
            .l1{
              background-color: #8ba396;
              img{
                width: 35px;
              }

            }
          }
        }

      }

    }
    .tabs{
      margin-bottom: 280px;
      position: relative;
      top: -20px;
      z-index: 999;
      background-color: #fbfcfd;
      border-top-left-radius: 45px;
      border-top-right-radius: 45px;
      width: 100%;
      .van-tabs van-tabs--line{
        border-top-left-radius: 45px;
        border-top-right-radius: 45px;
      }
      .p1{
        margin-top: 15px;
        line-height: 76px;
        background-color: #efeff0;
        font-size: 0;
        padding: 0 30px;
        box-sizing: border-box;
        span{
          display: inline-block;
          vertical-align: middle;
          width: 50%;
          font-size: 32px;
          color: #8f8f90;
        }
        .s1{
          text-align: left;
        }
        .s2{
          text-align: right;
        }
      }
      span{
        display: inline-block;
        vertical-align: middle;
      }
     .gedan{

       width: 100%;
       margin-top: 10px;
       box-sizing: border-box;
       padding-left: 30px;
       ul{
         li{
           font-size: 0;
           list-style: none;
           .s1{
             width: 160px;
             height: 160px;
             background-color: red;
             border-radius: 20px;
             img{
               width: 160px;
               height: 160px;
               border-radius: 20px;
             }
           }
           .s2{
             margin-left: 30px;
             width:1025px ;
             height: 180px;
             border-bottom: 2px solid #ccc;
             .rank{
               font-size: 50px;
               font-weight: bold;
               box-sizing: border-box;
               padding-top: 25px;
             }
             .num{
               font-size: 35px;
               color: #969798;
               box-sizing: border-box;
               margin-top:5px;
             }
           }
         }
       }

      }
      .info{
        box-sizing: border-box;
        padding-left: 20px;
        margin-top: 60px;
        .renzheng{
          font-size: 45px;
          font-weight: bold;
        }
        .pgeshou{
          color: #747475;
          font-size: 40px;
          margin-top: 45px;
          vertical-align: middle;
          span{

            display: inline-block;
            width: 65px;
            height: 65px;
            background-color: red;
            border-radius: 50%;
            vertical-align: middle;
            img{
              width: 40px;
              margin-top: 12.5px;
              display: block;
              margin-left: 12.5px;
              vertical-align: middle;
            }
          }
        }
      }
      .gereninfo{
        margin-top: 115px;
        box-sizing: border-box;

        padding-left: 20px;
        .ptitle{
          font-weight: bold;
          font-size: 45px;
          margin-bottom: 40px;
        }
        .pinfo{
          color: #747475;
          font-size: 40px;
        }
        .sleave{
          display: inline-block;
          padding: 10px 20px;
          box-sizing: border-box;
          border-radius: 35px;
          font-size: 27.5px;
          font-weight: bold;
          font-style: italic;
          border: 3px solid #d4d4d5;
        }
        .jianjie{
          margin-top: 115px;
          font-weight: bold;
          font-size: 45px;
          margin-bottom: 40px;
        }
        .text{
          color: #747475;
          font-size: 40px;
        }
      }
      .event{
        box-sizing: border-box;
        padding-left: 30px;
       padding-top: 60px;

        border-bottom: 2px solid #ccc;
        background-color: white;
        .sleft{
          height: 660px;
          display: inline-block;
          .simg{
            width: 120px;
            height: 120px;
            position: relative;
            border-radius: 50%;
            background-color: bisque;
            img{
              width: 100%;
              height: 100%;

              border-radius: 50%;
            }
            .cil{
              width: 50px;
              height: 50px;
              display: inline-block;
              border-radius: 50%;
              background-color: red;
              position: absolute;
              right: -15px;
              bottom: 0;
              img{
                width: 30px;
                margin-top: 10px;
                margin-left: 10px;
                display: block;
              }
            }
          }
        }

        .stext{
          display: inline-block;
          height: 660px;
          box-sizing: border-box;
          padding-left: 20px;
          .pname{
            font-size: 45px;
            .s1{
              color: #5a7cab;
            }
          }
          .date{
            font-size: 30px;
            color: #969798;
          }
          .pte,.pte2{
            box-sizing: border-box;
            font-size: 50px;
            padding-top: 60px;
            font-weight: bold;
            width: 1030px;
            overflow:hidden;
            text-overflow:ellipsis;
            white-space:nowrap
          }
          .pte2{
            box-sizing: border-box;
            padding: 30px 0;
          }
          .vi{
            width: 1030px;
            padding: 25px;
            margin-top: 15px;

            box-sizing: border-box;
            background-color: #f1f2f3;
            border-radius: 30px;
            .svideo{
              width: 120px;
              height: 120px;
              display: inline-block;
              vertical-align: middle;
              img{
                width: 100%;
                height: 100%;
              }
              video{
                width: 100%;
                height: 100%;
                background-color: aqua;
                border-radius: 30px;
              }
            }
            .sname{
              height: 120px;
              display: inline-block;
              font-size: 40px;
              .s2{
                font-size: 32px;
                color: #787879;
              }
            }

          }
          .pl{
            width: 100%;
            box-sizing: border-box;
            padding-top: 67px;
            position: relative;
            .s4{
              width: unset;
              position: absolute;
              right:0;
              display: inline-block;
              top: 70%;
              transform: translateY(-50%);
            }
            span{
              display: inline-block;
              vertical-align: middle;
              width: 220px;
              text-align: left;
              font-size: 40px;
              color: #969798;
              img{
                width: 50px;
                vertical-align: middle;
              }
            }
          }
        }
      }
    }
  }
</style>
